<template>
  <div class="personal">
    <header class="g-header-container">
      <personal-header></personal-header>
    </header>
    <me-scroll>
      <div class="personal-container">
        <div class="title">
          <i class="iconfont icon-personal"></i>
          <div class="personal-button"><span class="login">注册</span>|<span class="enter">登录</span></div>
        </div>
        <div class="order">
          <div class="order-title">
            <div class="left"><i class="iconfont icon-personal"></i>我的订单</div>
            <div class="right">查看我的全部订单<i class="iconfont icon-back"></i></div>
          </div>
          <div class="order-list">
            <div class="order-item">
              <i class="iconfont icon-category"></i>
              <span>待付款</span>
            </div>
            <div class="order-item">
              <i class="iconfont icon-shop"></i>
              <span>待收货</span>
            </div>
            <div class="order-item">
              <i class="iconfont icon-msg"></i>
              <span>待评价</span>
            </div>
            <div class="order-item">
              <i class="iconfont icon-setting"></i>
              <span>退货/退款</span>
            </div>
          </div>
        </div>
        <div class="property">
          <div class="property-title">
            <div class="left"><i class="iconfont icon-personal"></i>我的资产</div>
          </div>
          <div class="property-list">
            <div class="property-item">现金券</div>
            <div class="property-item">红包</div>
            <div class="property-item">余额</div>
            <div class="property-item">礼品卡</div>
          </div>
        </div>
        <div class="service">
          <div v-for="(item, index) in services"
          :key="index" class="service-title">
            <div class="left"><i :class="'iconfont icon-' + item.iconname"></i>{{item.text}}</div>
            <div class="right"><i class="iconfont icon-back"></i></div>
          </div>
        </div>
        <div class="remark">
          <p>客服热线400-123-8888 (8:00-22:00)</p>
          <p>拨打前请记录您的UID 0</p>
        </div>
      </div>
    </me-scroll>
  </div>
</template>

<script>
  import PersonalHeader from './header';
  import MeScroll from 'base/scroll';
  import {serviceItems} from './config';
  export default {
    name: 'Personal',
    components: {
      PersonalHeader,
      MeScroll
    },
    created() {
      this.services = serviceItems;
    }
  };
</script>

<style lang="scss" scoped>
  @import "~assets/scss/mixins";
  .personal {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #eee;
    padding-bottom: 100px;
  }

  .personal-container {
    width: 100%;
  }

  .personal-container .title {
    background-color: $header-bgc-translucent;
    height: 200px;
    color: #fff;
    @include flex-center(column);
  }

  .personal-container .title .iconfont {
    font-size: 70px;
    padding-bottom: 20px;
  }
  .personal-container .title .personal-button {
    font-size: 18px;
  }
  .personal-container .title .personal-button .login {
    padding-right: 40px;
    font-weight: bold;
  }
  .personal-container .title .personal-button .enter {
    padding-left: 40px;
    font-weight: bold;
  }

  .personal-container .order,
  .personal-container .property,
  .personal-container .service {
    background-color: #fff;
    margin: 10px 3px 0 3px;
  }
  .personal-container .order .order-title {
    height: 40px;
    border-bottom: 1px solid #ccc;
    @include flex-between();
  }
  .personal-container .order .order-title .left,
  .personal-container .property .property-title .left,
  .personal-container .service .service-title .left {
    padding-left: 10px;
    color: #030303;
    font-size: 16px;
  }
  .personal-container .order .order-title .left .icon-personal,
  .personal-container .property .property-title .left .icon-personal,
  .personal-container .service .service-title .left .iconfont {
    font-size: 22px;
    padding-right: 10px;
    color: #999;
  }

  .personal-container .order .order-title .right .icon-back,
  .personal-container .service .service-title .right .icon-back {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    display: inline-block;
    padding: 0 8px;
  }
  .personal-container .order .order-list {
    display: flex;
  }
  .personal-container .order .order-list .order-item {
    flex: 1;
    @include flex-center(column);
    font-size: 14px;
    padding: 15px 0 10px 0;
  }
  .personal-container .order .order-list .order-item .iconfont {
    margin-bottom: 4px;
    font-size: 30px;
    padding-bottom: 5px;
  }

  .personal-container .property .property-title,
  .personal-container .service .service-title {
    height: 40px;
    border-bottom: 1px solid #eee;
  }

  .personal-container .property .property-title .left {
    line-height: 40px;
  }
  .personal-container .property .property-list {
    display: flex;
    padding: 15px 0;
  }
  .personal-container .property .property-list .property-item {
    flex: 1;
    @include flex-center();
    font-size: 14px;
  }

  .personal-container .service .service-title {
    @include flex-between();
  }

  .personal-container .remark {
    margin: 15px 0 20px 15px;
    color: #999;
    font-size: 14px;
  }
  .personal-container .remark p {
    line-height: 25px;
  }
</style>
